import { uniqueId } from 'lodash';
import { Upload, Button, UploadFile, Space } from '@pxxtech/web';
import { ContractFill } from '@pxxtech/icons';
import { DemoBlock } from 'demos';
import { useState } from 'react';

const file = () => {
  const id = uniqueId('file_');
  return {
    id,
    name: `c8b83238a5f54bb7ad11fe29d7d33637_${id}.png`,
    url: `https://dev-1302801272.cos.ap-guangzhou.myqcloud.com/undefined/undefined/16259354/c8b83238a5f54bb7ad11fe29d7d33637.png?_t=${id}`,
  } as UploadFile;
};

function Image() {
  const [fileList, setFileList] = useState<UploadFile[]>(() => {
    const errFile = file();
    errFile.url =
      'https://dev-1302801272.cos.ap-guangzhou.myqcloud.com/undefined/undefined/16259354/c8b83238a5f54bb7ad11fe29d7d33639.png';
    errFile.status = 'error';
    return [file(), errFile];
  });
  return (
    <>
      <Upload.Image
        desc="(受控模式，并且具备初始值)"
        value={fileList}
        onChange={setFileList}
      />
      <Button
        color="primary"
        onClick={() => setFileList([...fileList, file()])}
      >
        点击增加一个图片到受控
      </Button>
    </>
  );
}

export default () => {
  const [fileList, setFileList] = useState<UploadFile[]>(() => {
    const errFile = file();
    errFile.url =
      'https://dev-1302801272.cos.ap-guangzhou.myqcloud.com/undefined/undefined/16259354/c8b83238a5f54bb7ad11fe29d7d33639.png';
    errFile.status = 'error';
    return [file(), errFile];
  });
  const [fileList1] = useState<UploadFile[]>(() => {
    const file2 = file();
    file2.disabled = true;
    return [file(), file2];
  });

  return (
    <Space wrap>
      <DemoBlock title="文件上传" style={{ width: 400 }}>
        <Space direction="vertical">
          <Upload />
          <Upload single desc="(单文件模式)" />
          <Upload maxCount={2} desc="(最多上传两个文件)" />
          <Upload
            desc="(受控模式，并且具备初始值)"
            value={fileList}
            onChange={setFileList}
          />
          <Button
            color="primary"
            onClick={() => setFileList([...fileList, file()])}
          >
            点击增加一个文件到受控
          </Button>
          <Upload
            accept=".png, .jpg, .jpeg, .pdf"
            maxSize={10}
            desc="(请上传格式为PDF、PNG、JPG或JPEG，大小10M以内的文件)"
          />
          <Upload
            accept=".png, .jpg, .jpeg, .pdf"
            maxSize={10}
            desc="(自定义按钮，改变默认文本和Icon)"
            buttonProps={{
              icon: <ContractFill />,
              children: '上传合同文件',
              className: 'custom-class',
            }}
          />
          <Upload
            desc="(禁用模式，并具备初始值)"
            disabled
            value={[file(), file()]}
          />
          <Upload desc="(部分禁用模式)" value={fileList1} />
          <Upload>
            <div
              style={{
                border: '1px solid rgba(26, 43, 78, 0.24)',
                padding: 16,
                cursor: 'pointer',
              }}
            >
              自定义的上传组件
            </div>
          </Upload>
        </Space>
      </DemoBlock>

      <DemoBlock title="图片上传" style={{ width: 640 }}>
        <Space direction="vertical">
          <Upload.Image />
          <Upload maxCount={2} desc="(最多上传两张图片)" />
          <Image />
          <Upload.Image
            desc="(禁用模式，并具备初始值)"
            disabled
            value={[file(), file()]}
          />
          <Upload.Image desc="(部分禁用模式)" value={fileList1} />
        </Space>
      </DemoBlock>
    </Space>
  );
};
